// 通用工具函数 - 基础核心功能

// ============================
// 核心DOM操作（基础功能）
// ============================

/**
 * 获取单个DOM元素
 * @param {string} selector - CSS选择器
 * @param {Document|Element} context - 上下文元素
 * @returns {Element|null}
 */
function dom(selector, context = document) {
    return context.querySelector(selector);
}

/**
 * 获取多个DOM元素
 * @param {string} selector - CSS选择器
 * @param {Document|Element} context - 上下文元素
 * @returns {NodeList}
 */
function doms(selector, context = document) {
    return context.querySelectorAll(selector);
}

/**
 * 创建DOM元素
 * @param {string} tag - 标签名
 * @param {Object} attributes - 属性键值对
 * @param {string} content - 文本内容
 * @returns {Element}
 */
function createElement(tag, attributes = {}, content = '') {
    const el = document.createElement(tag);

    // 设置属性
    Object.keys(attributes).forEach(key => {
        if (key === 'class') {
            el.className = attributes[key];
        } else if (key === 'style') {
            Object.assign(el.style, attributes[key]);
        } else if (key.startsWith('data-')) {
            el.setAttribute(key, attributes[key]);
        } else {
            el[key] = attributes[key];
        }
    });

    // 设置内容
    if (content) el.textContent = content;

    return el;
}

// ============================
// 事件处理（基础功能）
// ============================

/**
 * 为元素添加事件监听
 * @param {Element} el - DOM元素
 * @param {string} event - 事件类型
 * @param {Function} handler - 事件处理函数
 * @param {boolean} useCapture - 是否捕获阶段触发
 */
function on(el, event, handler, useCapture = false) {
    if (el?.addEventListener) {
        el.addEventListener(event, handler, useCapture);
    }
}

/**
 * 移除元素事件监听
 * @param {Element} el - DOM元素
 * @param {string} event - 事件类型
 * @param {Function} handler - 事件处理函数
 * @param {boolean} useCapture - 是否捕获阶段触发
 */
function off(el, event, handler, useCapture = false) {
    if (el?.removeEventListener) {
        el.removeEventListener(event, handler, useCapture);
    }
}

// ============================
// 样式操作（基础功能）
// ============================

/**
 * 为元素添加类名
 * @param {Element} el - DOM元素
 * @param {string} className - 类名
 */
function addClass(el, className) {
    if (el?.classList?.add) {
        el.classList.add(className);
    }
}

/**
 * 移除元素类名
 * @param {Element} el - DOM元素
 * @param {string} className - 类名
 */
function removeClass(el, className) {
    if (el?.classList?.remove) {
        el.classList.remove(className);
    }
}

/**
 * 切换元素类名
 * @param {Element} el - DOM元素
 * @param {string} className - 类名
 */
function toggleClass(el, className) {
    if (el?.classList?.toggle) {
        el.classList.toggle(className);
    }
}

// ============================
// 全局UI组件（唯一实现）
// ============================

/**
 * 显示加载动画
 * @param {string} text - 加载提示文本
 */
function showLoading(text = '加载中...') {
    let loadingEl = dom('#global-loading');

    if (!loadingEl) {
        loadingEl = createElement('div', {
            id: 'global-loading',
            style: {
                position: 'fixed',
                top: '0',
                left: '0',
                width: '100%',
                height: '100%',
                background: 'rgba(0,0,0,0.5)',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                zIndex: '9999'
            }
        });

        const spinner = createElement('div', {
            class: 'loading-spinner',
            style: {
                width: '50px',
                height: '50px',
                border: '5px solid #fff',
                borderTopColor: '#007bff',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite'
            }
        });

        const textEl = createElement('p', {
            style: { color: '#fff', marginTop: '15px', fontSize: '16px' }
        }, text);

        const container = createElement('div');
        container.append(spinner, textEl);
        loadingEl.append(container);
        document.body.append(loadingEl);

        // 添加动画样式
        const style = createElement('style');
        style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
        document.head.append(style);
    } else {
        loadingEl.style.display = 'flex';
    }
}

/**
 * 隐藏加载动画
 */
function hideLoading() {
    const loadingEl = dom('#global-loading');
    if (loadingEl) loadingEl.style.display = 'none';
}

/**
 * 显示消息提示
 * @param {string} message - 消息内容
 * @param {string} type - 类型：success/error/info
 * @param {number} duration - 显示时长(ms)
 */
function showMessage(message, type = 'info', duration = 3000) {
    const msgEl = createElement('div', {
        class: `message ${type}`,
        style: {
            position: 'fixed',
            top: '20px',
            left: '50%',
            transform: 'translateX(-50%)',
            padding: '10px 20px',
            borderRadius: '4px',
            color: '#fff',
            zIndex: '10000',
            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
            opacity: '0',
            transition: 'opacity 0.3s'
        }
    }, message);

    // 设置背景色
    const bgColors = {
        success: '#4CAF50',
        error: '#F44336',
        info: '#2196F3'
    };
    msgEl.style.backgroundColor = bgColors[type] || bgColors.info;

    document.body.append(msgEl);

    // 显示动画
    setTimeout(() => msgEl.style.opacity = '1', 10);

    // 自动关闭
    setTimeout(() => {
        msgEl.style.opacity = '0';
        setTimeout(() => msgEl.remove(), 300);
    }, duration);
}

// 暴露API
window.dom = dom;
window.doms = doms;
window.createElement = createElement;
window.on = on;
window.off = off;
window.addClass = addClass;
window.removeClass = removeClass;
window.toggleClass = toggleClass;
window.showLoading = showLoading;
window.hideLoading = hideLoading;
window.showMessage = showMessage;